<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Introduction to Visual Basic GTK#</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, Visual Basic, Introduction">
<meta name="description" content="Introduction to Visual Basic GTK#">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Visual Basic GTK#</h1>

<p>
In this part of the Visual Basic GTK# programming tutorial, we will 
introduce the GTK# library and
create our first programs using the Visual Basic programming 
language.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 


<p>
The purpose of this tutorial is to get you started with the GTK# 
and Visual Basic. Images used in this
tutorial can be downloaded <a href="/img/gui/vbgtk/images.zip">here</a>. 
I used some icons from the
tango icons pack of the Gnome project. 
</p>

<h2>About</h2>

<p>
<b class="keyword">GTK#</b> is a library that provides binding of the GTK+ to the
Mono .NET languages like C# or Visual Basic. 
GTK+ is one of the leading toolkits for creating graphical user interfaces.
Both GTK# and Visual Basic are parts of the Mono development platform. 
</p>

<pre>
vbnc -r:/usr/lib/mono/gtk-sharp-2.0/gtk-sharp.dll quitbutton.vb
</pre>

<p>
The above command shows, how to compile the quitbutton example. The -r parameter of the
mono VB compiler loads the GTK# assembly. It is a dynamic library. The commnad shows
a path to the dll library on a Ubuntu system. 
</p>

<h2>Simple example</h2>

<p>
In the first example, we create a simple window. The window is
centered on the screen. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program centers a window on 
' the screen
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Center")
        Me.SetDefaultSize(250, 150)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDeleteEvent

        Me.Show
        
    End Sub
    
    Sub OnDeleteEvent(ByVal sender as Object, _
            ByVal args as DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
This example shows a 250x150 px window in the centre of the screen.
</p>

<pre class="explanation">
Imports Gtk
</pre>

<p>
The <b class="keyword">Imports</b> keyword imports necessery types that we will use
in the application.
</p>

<pre class="explanation">
Public Class GtkVBApp
    Inherits Window
</pre>

<p>
The example inherits from a <b class="keyword">Window</b>. 
The Window is a toplevel container. 
</p>

<pre class="explanation">
MyBase.New("Center")
</pre>

<p>
Here we call the parent's constructor.
</p>

<pre class="explanation">
Me.SetDefaultSize(250, 150)
</pre>

<p>
We set a default size for the application window. 
</p>

<pre class="explanation">
Me.SetPosition(WindowPosition.Center)
</pre>

<p>
This line centers the window on the screen. 
</p>

<pre class="explanation">
AddHandler Me.DeleteEvent, AddressOf Me.OnDeleteEvent
</pre>

<p>
We plug a handler to the <b class="keyword">DeleteEvent</b>.
</p>

<pre class="explanation">
Me.Show
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
 Sub OnDeleteEvent(ByVal sender as Object, _
         ByVal args as DeleteEventArgs)
     Application.Quit
 End Sub
</pre>

<p>
The event is triggered, when we click on the close button in the titlebar.
Or press Alt + F4. The method quits the application for good. 
</p>

<pre class="explanation">
 Application.Init
 Dim app As New GtkVBApp
 Application.Run
</pre>

<p>
These three lines set up the application. 
</p>


<h2>Creating a Tooltip</h2>

<p>
The second example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program shows a tooltip
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Tooltip")
        Me.SetDefaultSize(250, 150)
        Me.SetPosition(WindowPosition.Center)
        
        AddHandler Me.DeleteEvent, AddressOf Me.OnDeleteEvent
        Me.TooltipText = "This is a Window"

        Me.Show
        
    End Sub
    
    Sub OnDeleteEvent(ByVal sender as Object, _
            ByVal args as DeleteEventArgs)
        Application.Quit
    End Sub
 
    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
Me.TooltipText = "This is a Window"
</pre>

<p>
We set a tooltip through the <b class="keyword">TooltipText</b> property.
</p>

<br>
<img src="/img/gui/vbgtk/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic GTK# tutorial
'
' This program creates a quit
' button. When we press the button,
' the application terminates. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports Gtk
 
Public Class GtkVBApp
    Inherits Window
 
    Public Sub New
        
        MyBase.New("Quit button")
        
        Me.InitUI
        
        Me.SetDefaultSize(250, 150)
        Me.SetPosition(WindowPosition.Center)
        AddHandler Me.DeleteEvent, AddressOf Me.OnDelete

        Me.ShowAll 
        
    End Sub
    
    Private Sub InitUI
        
        Dim quitButton As New Button("Quit")
        quitButton.SetSizeRequest(80, 30)
        
        AddHandler quitButton.Clicked, AddressOf Me.OnQuit
        
        Dim fix As New Fixed
        fix.Put(quitButton, 50, 50)

        Me.Add(fix)

    End Sub
    
    Sub OnQuit(ByVal sender As Object, _
            ByVal args As EventArgs)
        Application.Quit
    End Sub
    
    Sub OnDelete(ByVal sender As Object, _
            ByVal args As DeleteEventArgs)
        Application.Quit
    End Sub

    Public Shared Sub Main
    
        Application.Init
        Dim app As New GtkVBApp
        Application.Run
        
    End Sub
 
End Class
</pre>

<p>
We use a <b class="keyword">Button</b> widget. This is a very common widget.
It shows a text label, image or both. 
</p>

<pre class="explanation">
Me.InitUI
</pre>

<p>
We delegate the creation of the user interface to the <b class="keyword">InitUI</b> method.
</p>

<pre class="explanation">
Me.ShowAll 
</pre>

<p>
We have two options. Either to call <b class="keyword">Show</b> on all widgets, or to call
<b class="keyword">ShowAll</b>, which shows the container and all its children. 
</p>

<pre class="explanation">
Dim quitButton As New Button("Quit")
</pre>

<p>
Here we create a button widget. 
</p>

<pre class="explanation">
quitButton.SetSizeRequest(80, 30)
</pre>

<p>
We set a size for a button.
</p>

<pre class="explanation">
AddHandler quitButton.Clicked, AddressOf Me.OnQuit
</pre>

<p>
We plug the <b class="keyword">OnQuit</b> method to the
button <b class="keyword">Clicked</b> event.
</p>

<pre class="explanation">
 Dim fix As New Fixed
 fix.Put(quitButton, 50, 50)
</pre>

<p>
We put the quit button into the fixed container at x=50, y=50.
</p>

<pre class="explanation">
Sub OnQuit(ByVal sender As Object, _
        ByVal args As EventArgs)
    Application.Quit
End Sub
</pre>

<p>
Inside the the <b class="keyword">OnQuit</b> method, we terminate the application.
</p>


<br>
<img src="/img/gui/vbgtk/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<hr class="btm">

<p>
This section was an introduction to the GTK# library with the Visual Basic language.
</p>

<br> 
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 24, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
